<template>
	<div>
		<div class="container">
			<div class="handle-box">
			
				<el-input v-model="query.UserName" placeholder="用户名" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary"  :icon="Plus" @click="handleAdd">新增</el-button>
				<el-button type="primary" :icon="Search" @click="btnExport">导出</el-button>

			</div>
			<el-table id="tab1" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="ID" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="UserName" label="账号"></el-table-column>
				<el-table-column prop="NickName" label="姓名"></el-table-column>
				<el-table-column prop="Age" label="年龄"></el-table-column>
				<el-table-column prop="Email" label="邮箱"></el-table-column>
				<el-table-column prop="Phone" label="手机号"></el-table-column>
                <el-table-column prop="Sex" label="性别">
                    <template #default="scope">
                        {{ scope.row.Sex==1?'男':"女" }}
                    </template>
                </el-table-column>
                
                <el-table-column prop="Remake" label="备注"></el-table-column>

                <el-table-column prop="Roleid" label="角色">
                       <template #default="scope">
                        {{ computRole(scope.row.Roleid)}}
                     </template>
                </el-table-column>
                <el-table-column prop="Datetime" label="创建时间"></el-table-column>

				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.row.ID)" v-permiss="16">
							删除
						</el-button>
						<!-- <el-button @click="exportExcel('tab1', '用户信息.xlsx')"></el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="title" v-model="editVisible" width="30%">
			<el-form label-width="70px">
                <el-form-item label="id">
					<el-input type="number" v-model="form.ID" disabled></el-input>
				</el-form-item>
                <el-form-item label="手机号">
					<el-input  v-model="form.Phone"></el-input>
				</el-form-item>
                
                <el-form-item label="邮箱">
					<el-input  v-model="form.Email"></el-input>
				</el-form-item>
                
				<el-form-item label="用户名">
					<el-input v-model="form.UserName"></el-input>
				</el-form-item>
                <el-form-item label="姓名">
					<el-input v-model="form.NickName"></el-input>
				</el-form-item>
                	<el-form-item label="密码" v-if="title!='编辑'">
					<el-input v-model="form.PassWord"></el-input>
				</el-form-item>
                	<el-form-item label="年龄">
					<el-input type="number" v-model.number="form.Age"></el-input>
				</el-form-item>
                
                <el-form-item label="性别">
					<el-select v-model.number="form.Sex" placeholder="性别" class="handle-select mr10">
					<el-option key="1" label="男" :value="Number(1)"></el-option>
					<el-option key="2" label="女" :value="Number(2)"></el-option>
				</el-select>
				</el-form-item>
                 <el-form-item label="权限">
					<el-select v-model.number="form.Roleid" placeholder="性别" class="handle-select mr10">
					<el-option v-for="item in option" v-bind:key="item.Roleid" :label="item.RoleName" :value="Number(item.Roleid)">

                    </el-option>
				</el-select>
				</el-form-item>

                	<el-form-item label="备注">
					<el-input  v-model="form.Remake"></el-input>
				</el-form-item>
				
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive, watch, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus, User } from '@element-plus/icons-vue';
import { List,Add,Update,Deleteuser } from '../../api/user/user';
import { List as RoleList,Role } from '../../api/role';
import {exportExcel} from '../../utils/export'



const btnExport=()=>{
	let queryCopy=Object.assign({},query);
	queryCopy.pageIndex=1;
	queryCopy.pageSize=100000;
	List(queryCopy).then(res=>{
		res.data.Data.forEach(item => {
			
			item.Roleid=RoleMap.get(item.Roleid)
		});
		exportExcel({
			json: res.data.Data,
			name: '表格',
			titleArr: ['年龄     ',
						'登录时间',
						'邮箱',
						'用户id',
						'用户姓名',
						'手机号',
						'备注',
						'角色id',
						'性别',
						'登录账号',
						'登录密码'],
			sheetName: 'sheet1',
		})
	})
}

const title=ref('')

interface User{
        Age:number;
        Datetime: string;
        Email: string;
        ID: number;
        NickName: string;
        PassWord: string;
        Phone: string;
        Remake: string;
        Roleid: number;
        Sex: number;
        UserName:string;
}
const computRole=(roleId:number)=>{
	return RoleMap.get(roleId)	
}
const option=ref<Role[]>([])
const RoleMap=new Map();

const query = reactive({
	UserName: '',
	pageIndex: 1,
	pageSize: 10
});
const tableData = ref<User[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
    RoleList({}).then(res=>{
        option.value=res.data.Data
        option.value.forEach((item)=>{
            RoleMap.set(Number(item.Roleid),item.RoleName)
        })
		List(query).then(res => {
		tableData.value = res.data.Data;
		pageTotal.value = res.data.TotalNumber || 50;
		});
    })   
	console.log(RoleMap)
	
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData();
};

// 删除操作
const handleDelete = (id: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			Deleteuser(id).then(res=>{
                ElMessage.success('删除成功');
                getData()
            })
		})
		.catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = ref<User>({} as User);
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
	form.value=Object.assign({},row)
    title.value='编辑'
	editVisible.value = true;
};
const handleAdd = () => {
    form.value={} as User
    title.value='添加'
	editVisible.value = true;
};
const submitForm = () => {
    if(title.value=='编辑'){
        Update(form.value as User).then(Res=>{
            ElMessage.success(Res.data)
             getData()
        })
    }else{
        Add(form.value as User).then(Res=>{
             ElMessage.success(Res.data)
             getData()
        })
    }

     editVisible.value = false;
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
